Conditions | 6 |
Total Lines | 181 |
Code Lines | 148 |
Lines | 0 |
Ratio | 0 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | import React from "react"; |
||
243 | |||
244 | public render(): React.ReactElement { |
||
245 | const { |
||
246 | application, |
||
247 | reviewStatusOptions, |
||
248 | isSaving, |
||
249 | intl, |
||
250 | portal, |
||
251 | } = this.props; |
||
252 | const l10nReviewStatusOptions = reviewStatusOptions.map((status) => ({ |
||
253 | value: status.value, |
||
254 | label: intl.formatMessage(messages[status.label]), |
||
255 | })); |
||
256 | const { selectedStatusId } = this.state; |
||
257 | const reviewStatus = |
||
258 | application.application_review && |
||
259 | application.application_review.review_status |
||
260 | ? application.application_review.review_status.name |
||
261 | : null; |
||
262 | const statusIconClass = className("fas", { |
||
263 | "fa-ban": reviewStatus === "screened_out", |
||
264 | "fa-question-circle": reviewStatus === "still_thinking", |
||
265 | "fa-check-circle": reviewStatus === "still_in", |
||
266 | "fa-exclamation-circle": reviewStatus === null, |
||
267 | }); |
||
268 | const applicantUrlMap: { [key in typeof portal]: string } = { |
||
269 | hr: routes.hrApplicantShow( |
||
270 | intl.locale, |
||
271 | application.id, |
||
272 | application.job_poster_id, |
||
273 | ), |
||
274 | manager: routes.managerApplicantShow( |
||
275 | intl.locale, |
||
276 | application.id, |
||
277 | application.job_poster_id, |
||
278 | ), |
||
279 | }; |
||
280 | const applicationUrlMap: { [key in typeof portal]: string } = { |
||
281 | hr: routes.hrApplicationShow( |
||
282 | intl.locale, |
||
283 | application.id, |
||
284 | application.job_poster_id, |
||
285 | ), |
||
286 | manager: routes.managerApplicationShow( |
||
287 | intl.locale, |
||
288 | application.id, |
||
289 | application.job_poster_id, |
||
290 | ), |
||
291 | }; |
||
292 | const applicantUrl = applicantUrlMap[portal]; |
||
293 | const applicationUrl = applicationUrlMap[portal]; |
||
294 | |||
295 | /** |
||
296 | * Returns true only if selectedStatusId matches the review |
||
297 | * status of props.application |
||
298 | */ |
||
299 | const isUnchanged = (): boolean => { |
||
300 | if ( |
||
301 | application.application_review && |
||
302 | application.application_review.review_status_id |
||
303 | ) { |
||
304 | return ( |
||
305 | application.application_review.review_status_id === selectedStatusId |
||
306 | ); |
||
307 | } |
||
308 | return selectedStatusId === undefined; |
||
309 | }; |
||
310 | |||
311 | const getSaveButtonText = (): string => { |
||
312 | if (isSaving) { |
||
313 | return intl.formatMessage(messages.saving); |
||
314 | } |
||
315 | if (isUnchanged()) { |
||
316 | return intl.formatMessage(messages.saved); |
||
317 | } |
||
318 | return intl.formatMessage(messages.save); |
||
319 | }; |
||
320 | const saveButtonText = getSaveButtonText(); |
||
321 | const noteButtonText = |
||
322 | application.application_review && application.application_review.notes |
||
323 | ? intl.formatMessage(messages.editNote) |
||
324 | : intl.formatMessage(messages.addNote); |
||
325 | |||
326 | return ( |
||
327 | <form className="applicant-summary"> |
||
328 | <div className="flex-grid middle gutter"> |
||
329 | <div className="box lg-1of11 applicant-status"> |
||
330 | <i className={statusIconClass} /> |
||
331 | </div> |
||
332 | |||
333 | <div className="box lg-2of11 applicant-information"> |
||
334 | <span |
||
335 | className="name" |
||
336 | data-name={`${application.applicant.user.first_name} ${application.applicant.user.last_name}`} |
||
337 | > |
||
338 | {application.applicant.user.first_name}{" "} |
||
339 | {application.applicant.user.last_name} |
||
340 | </span> |
||
341 | <a |
||
342 | href={`mailto: ${application.applicant.user.email}`} |
||
343 | title={intl.formatMessage(messages.emailCandidate)} |
||
344 | data-email={`${application.applicant.user.email}`} |
||
345 | className="email" |
||
346 | > |
||
347 | {application.applicant.user.email} |
||
348 | </a> |
||
349 | {/* This span only shown for priority applicants */} |
||
350 | {application.applicant.user.is_priority && ( |
||
351 | <span className="priority-status"> |
||
352 | <i |
||
353 | aria-hidden="true" |
||
354 | className="fab fa-product-hunt" |
||
355 | title={intl.formatMessage(messages.priorityLogo)} |
||
356 | /> |
||
357 | {intl.formatMessage(messages.priorityStatus)} |
||
358 | </span> |
||
359 | )} |
||
360 | {/* This span only shown for veterans */} |
||
361 | {(application.veteran_status.name === "current" || |
||
362 | application.veteran_status.name === "past") && ( |
||
363 | <span className="veteran-status"> |
||
364 | <img |
||
365 | alt={intl.formatMessage(messages.veteranLogo)} |
||
366 | src={routes.imageUrl("icon_veteran.svg")} |
||
367 | />{" "} |
||
368 | {intl.formatMessage(messages.veteranStatus)} |
||
369 | </span> |
||
370 | )} |
||
371 | </div> |
||
372 | |||
373 | <div className="box lg-2of11 applicant-links"> |
||
374 | <a |
||
375 | title={intl.formatMessage(messages.viewApplicationTitle)} |
||
376 | href={applicationUrl} |
||
377 | > |
||
378 | <i className="fas fa-file-alt" /> |
||
379 | {intl.formatMessage(messages.viewApplicationText)} |
||
380 | </a> |
||
381 | <a |
||
382 | title={intl.formatMessage(messages.viewProfileTitle)} |
||
383 | href={applicantUrl} |
||
384 | > |
||
385 | <i className="fas fa-user" /> |
||
386 | {intl.formatMessage(messages.viewProfile)} |
||
387 | </a> |
||
388 | </div> |
||
389 | |||
390 | <div className="box lg-2of11 applicant-decision" data-clone> |
||
391 | <Select |
||
392 | id={`review_status_${application.id}`} |
||
393 | name="review_status" |
||
394 | label={intl.formatMessage(messages.decision)} |
||
395 | required={false} |
||
396 | selected={selectedStatusId || null} |
||
397 | nullSelection={intl.formatMessage(messages.notReviewed)} |
||
398 | options={l10nReviewStatusOptions} |
||
399 | onChange={this.handleStatusChange} |
||
400 | /> |
||
401 | </div> |
||
402 | |||
403 | <div className="box lg-2of11 applicant-notes"> |
||
404 | <button |
||
405 | className="button--outline" |
||
406 | type="button" |
||
407 | onClick={this.showNotes} |
||
408 | > |
||
409 | {noteButtonText} |
||
410 | </button> |
||
411 | </div> |
||
412 | |||
413 | <div className="box lg-2of11 applicant-save-button"> |
||
414 | <button |
||
415 | className="button--blue light-bg" |
||
416 | type="button" |
||
417 | onClick={() => this.handleSaveClicked()} |
||
418 | > |
||
419 | <span>{saveButtonText}</span> |
||
420 | </button> |
||
421 | </div> |
||
422 | </div> |
||
423 | </form> |
||
424 | ); |
||
429 |